import React, { Component } from 'react'
import { connect } from 'react-redux'
import './admin.scss'
import left from '../../assets/icon/left.png'
import right from '../../assets/icon/right.png'
import up from '../../assets/icon/up_7.png'
import down from '../../assets/icon/down_7.png'
import { siderbarroutes } from '../../common/siderbarroutes'
import { withRouter } from 'react-router-dom'
class admin extends Component {
  state = {
    toggle: true,//侧边栏展开与收缩
    selectKey: "1",//一级菜单的选中状态
    falg: false,//二级菜单的显示与隐藏
  }
  flag = () => {
    const { toggle } = this.state
    this.setState({ toggle: !toggle })
    toggle ? this.props.flag2() : this.props.flag1()
  }
  layout = () => {
    this.props.history.push('/');
    window.location.reload()
  }
  render() {
    const { width } = this.props
    const { toggle, selectKey, falg} = this.state
    return (
      <div className="admin">
        <div className="saiderbar" style={{ width: width + 'px' }}>
          <div className="logo">
            <img src={require('../../assets/icon/react.png').default} alt="logo" />
            <div className="title" style={{ display: toggle ? 'block' : 'none' }}>react后台管理</div>
          </div>
          {
            siderbarroutes.map(item => {
              if (item.children) {
                return <div key={item.path} className="level-list" onClick={() => {
                  this.setState({ selectKey: item.selectKey, falg: !falg })
                }} title={item.title}>
                  <div className="level-list-item" style={{ justifyContent: toggle ? '' : 'center' }}>
                    <div>
                      <img src={selectKey === item.selectKey ? item.icon1 : item.icon2} alt="icon" />
                      <div style={{ display: toggle ? 'block' : 'none' }}>{item.title}</div>
                    </div>
                    <div style={{ display: toggle ? 'block' : 'none' }}><img src={falg ? down : up} alt="up/down" /></div>
                  </div>
                  {
                    item.children.map(elem=>{
                      return <div key={elem.path} style={{display :falg ? 'flex' : 'none',justifyContent:toggle?'':'center'}} className={selectKey===elem.selectKey?"active-level-item":"level-item"}  title={elem.title} onClick={(e) => { this.setState({ selectKey: elem.selectKey},  e.stopPropagation(),this.props.history.push(elem.path)) }}>
                      <img src={elem.icon} alt="icon"/>
                      <div style={{display:toggle?'block':'none'}}>{elem.title}</div>
                    </div>
                    })
                  }
                </div>
              } else {
                return <div key={item.path} className={selectKey === item.selectKey ? 'active-list-item' : 'list-item'} onClick={() => { this.setState({ selectKey: item.selectKey }, this.props.history.push(item.path)) }} title={item.title} style={{ justifyContent: toggle ? '' : 'center' }}>
                  <div>
                    <img src={selectKey === item.selectKey ? item.icon1 : item.icon2} alt="icon" />
                    <div style={{ display: toggle ? 'block' : 'none' }}>{item.title}</div>
                  </div>
                </div>
              }
            })
          }
        </div>
        <div className="main" style={{ width: `calc(100vw - ${width + 'px'})` }}>
          <div className="header">
            <div className="image" onClick={this.flag}>
              <img src={toggle ? right : left} alt="toggle" title={toggle ? "向左收缩导航" : "向右展开导航"} />
            </div>
            <div className="avtor">
              <img src={require('../../assets/images/avtor.png').default} alt="" />
              <div className="layout"><div className="out" onClick={this.layout}>退出登录</div></div>
            </div>
          </div>
          <div className="content">{this.props.children}</div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    width: state.width
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    flag1: () => {
      dispatch({ type: 'flag1' })
    },
    flag2: () => {
      dispatch({ type: 'flag2' })
    }
  }
};
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(admin))